<script lang='ts' setup>
import { AccessLogInfo } from '@/models/admin/accesslog';
import { accessLogService } from '@/services/admin/accesslog.service';
import { FormatDate } from '@/utils/common.methods';
import { is } from '@babel/types';
import { ref, defineProps, onMounted, reactive } from 'vue';

const data = ref([] as AccessLogInfo[]);
const columns = ref([
  { colKey: 'path', title: '接口路径' },
  { colKey: 'ua', title: 'ua' },
  { colKey: 'ip', title: 'IP', width: 50 },
  { colKey: 'created', title: '时间' },
  { colKey: 'useruid', title: '用户 UID' }
])
const isLoading = ref(false);
const pagination = reactive({
  current: 1,
  pageSize: 20,
  total: 0,
  showJumper: true,
});
onMounted(() => {
  getList();
})

function getList(): void {
  isLoading.value = true;
  const { current, pageSize } = pagination;
  accessLogService.list(current, pageSize).then(res => {
    data.value = res.list;
    pagination.total = res.total;
    isLoading.value = false;
  })
}

function onUser(uid: string): void {
  console.log(uid);
}

// BaseTable 中只有 page-change 事件，没有 change 事件
const onPageChange = async (pageInfo) => {
  pagination.current = pageInfo.current;
  pagination.pageSize = pageInfo.pageSize;
  getList();
};

</script>
<template>
  <div>
    <t-base-table row-key="uid" size="small" :loading="isLoading" :tableLayout="true" bordered stripe
      :pagination="pagination" :data="data" :columns="columns" @page-change="onPageChange">
      <template #useruid="{ row }">
        <t-link theme="primary" hover="color" @click="onUser(row.user)"> {{ row.user }} </t-link>
      </template>
      <template #created="{ row }">
        <span>{{ FormatDate(row.created) }}</span>
      </template>
    </t-base-table>
  </div>
</template>
<style lang='scss' scoped></style>